<template>
  <div class="content shopCart">
    <div class="table">
      <el-table
        element-loading-text="正在为您拼命加载中..."
        :data="tableData"
        ref="multipleTable"
        style="width: 1345px;min-height: 600px;margin:0 auto;"
        @selection-change="handleSelectionChange"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :header-cell-style="{ background: '#f8f8f8', color: '#999' }"
      >
        <!-- 选择 -->
        <el-table-column type="selection" width="75" align="center" />
        <el-table-column type="index" width="50"> </el-table-column>
        <!-- 这个id之后需要注释掉 -->
        <!-- <el-table-column label="id" width="150">
          <template #default="{ row }">{{ row.id }}</template>
        </el-table-column> -->
        <el-table-column prop="name" label="商品" width="300">
        </el-table-column>
        <el-table-column
          prop="cost"
          label="价格(元)"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column prop="numb" label="数量" align="center">
          <template #default="{ row }">
            <i
              class="el-icon-minus"
              style="font-size:18px;cursor: pointer;"
              
              @click="handleQuantity(row ,1)"
            ></i>

            <el-input
              v-model.number="row.numb"
              oninput="value=value.replace(/[^\d]/g,'')"
              autocomplete="off"
              style="width:70px"
              size="mini"
              @change="handleInput(row)"
            >
            </el-input>

            <i
              class="el-icon-plus"
              style="font-size:18px;cursor: pointer;"
              @click="handleQuantity(row, 0)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="小计(元)" width="150">
          <template #default="{ row }">{{ row.numb * row.cost }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <i
              class="el-icon-delete"
              style="font-size:18px;cursor: pointer;"
              @click="handleDelete(row.id)"
            ></i>
          </template>
        </el-table-column>
      </el-table>

      <div class="submit">
        <van-submit-bar
          :price="totalPrice"
          :disabled="multipleSelection.length <= 0"
          label="产品总额："
        >
          <p class="submitBar">
            <span @click.prevent="tohome">继续购物</span>
            <span>
              共 <b>{{ tableData.length }}</b> 件商品, 已选择
              <b>{{ multipleSelection.length }}</b> 件
            </span>
            <button class="btn1" @click.prevent="toorder">去结算</button>
          </p>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getproductInfo,
  showshoppingcart,
  Batchdeleteproduct,
  // addorreduceproduct,
  cartNumber,
} from "@/api/shoppingcart";
import router from "@/router/index.js";
// 查看购物车中的某件商品getproductInfo
// 查看购物车showshoppingcart
// 批量删除购物车中的商品Batchdeleteproduct
// 购物车加减按钮addorreduceproduct
// [新增]购物车商品数量加减cartNumber

export default {
  data() {
    return {
      number: 0,
      list1: [],
      list2: [],
      tableData: [
        {
          id: "",
          name: "",
          cost: "",
          numb: "",
        },
      ],
      totalPrice: 0,
      multipleSelection: [],
    };
  },
  created() {
    showshoppingcart().then((res) => {
      this.list1 = res.data.data;
      this.tableData = this.list1;
      console.log("this.list1", res.data.data);
      this.tableData.length = this.list1.length;
      for (let index = 0; index < this.list1.length; index++) {
        this.tableData[index].numb = this.list1[index].quantity;

        this.list2[index] =
          this.list1[index].skuId.c[0] + "" + this.list1[index].skuId.c[1];
        getproductInfo(this.list2[index]).then((res) => {
          this.tableData[index].id = this.list2[index];
          this.tableData[index].name = res.data.data.caption;
          this.tableData[index].cost = res.data.data.cost;
        });
      }
      for (
        let index = this.tableData.length;
        index >= this.list1.length;
        index--
      ) {
        this.tableData.splice(index, 1);
      }
    });
  },
  methods: {
    // 删除单个商品
    handleDelete(index) {
      this.$confirm("确定删除该商品？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let id = index;
        let params = { productId: id };
        // 调用API
        Batchdeleteproduct(params).then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          router.go(0);
        });
      });
    },
    // 数量变化触发
    handleInput(value) {
      console.log(value);
      if (null == value.numb || value.numb == "" || value.numb == 0) {
        value.numb = 1;
      }
      // value.goodTotal = (value.numb * value.cost).toFixed(2); //保留两位小数
      //增加商品数量也需要重新计算商品总价
      this.handleSelectionChange(this.multipleSelection);

      let params = { productId: value.id, number: value.numb };
      cartNumber(params).then(() => {
        // console.log("res///", res.data);
      });
    },
    handleQuantity(index, k ) {
      //加减按钮 addorreduce////// 0：加   1：减
      let id = index.id;
      let number = index.numb;
      let j;
      for(let i = 0;i<this.tableData.length;i++ ){
          if(this.tableData[i].id==index.id){
            j=i
          }
        }
      if(k==0){
        number++
        this.tableData[j].numb++
        // this.tableData[row].numb++
        
      }
      else if(k==1){
        number--
        this.tableData[j].numb--
        // this.tableData[row].numb++
      }
      let params = { productId: id, number: number };
      cartNumber(params).then(() => {
        // console.log("res///", res.data);
      });

      // sleep的方法////注释掉
      // let fun = () => {
      //   router.go(0);
      // };
      // let sleep2 = (time) =>
      //   new Promise((resolve) => {
      //     setTimeout(resolve, time);
      //   });
      // sleep2(100).then(fun);
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.totalPrice = 0;
      //此处不支持forEach循环，只能用原始方法了
      for (var i = 0; i < selection.length; i++) {
        this.totalPrice += selection[i].numb * selection[i].cost;
      }
    },
    tohome() {
      router.push({ path: "/home" });
    },
    toorder() {
      this.$store.commit('setshop',this.multipleSelection)
      router.push("/createorder");
    },
  },
};
</script>

<style  scoped>
.btn1 {
  /* margin: 0 auto;
  background-color:  #eecd12;
  color: rgb(250, 250, 250);
  font-size: 23px;
  height: 50px;
  width: 100px; */
  margin: 0 auto;
  height: 50px;
  width: 100px;
  color: white;
  opacity: 0.8;
  background: -webkit-linear-gradient(
    left,
    rgb(87, 98, 257),
    rgb(103, 160, 225)
  );
  border: none;
}
.shopCart {
  margin-bottom: 50px;
}
.shopCart .steps {
  margin-top: 50px;
}
.shopCart .steps ::v-deep .el-step__head {
  border-color: #d8d8d8;
  color: #fff;
}
.shopCart .steps ::v-deep .el-step__head.is-finish {
  color: #fff;
  border-color: #bfa548;
}
.shopCart .steps ::v-deep .el-step__title {
  font-size: 15px;
}
.shopCart .steps ::v-deep .el-step__title.is-finish {
  color: #bfa548;
}
.shopCart .steps ::v-deep .el-step__title.is-process {
  color: #d8d8d8;
}
.shopCart .steps ::v-deep .is-finish .is-text {
  background: #bfa548;
}
.shopCart .steps ::v-deep .is-process .is-text {
  background: #d8d8d8;
}
.shopCart .steps ::v-deep .is-wait .is-text {
  background: #d8d8d8;
}
.shopCart .steps ::v-deep .el-step__line {
  height: 5px;
  top: 10px;
  background-color: #f1f1f1;
}
.shopCart .table {
  margin-top: 50px;
  position: relative;
  padding-bottom: 100px;
}
.shopCart .table ::v-deep .el-input__inner {
  text-align: center;
}
.shopCart .table ::v-deep .el-input-group__append {
  padding: 0 15px;
}
.shopCart .table ::v-deep .el-input-group__prepend {
  padding: 0 15px;
}
.shopCart .table .shopImg {
  width: 100%;
}
.shopCart .table .price, .shopCart .table .shop {
  color: #000733;
}
.shopCart .table .count {
  color: #bfa548;
}
.shopCart .table ::v-deep .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.shopCart .table ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #bfa548;
  border-color: #bfa548;
}
.shopCart .table ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #bfa548;
  border-color: #bfa548;
}
.shopCart .table ::v-deep .el-checkbox__inner::after {
  left: 7px;
  top: 3px;
}
.shopCart .table ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  top: 7px;
}
.shopCart .table .submit {
  position: absolute;
  right: 0;
  left: 200px;
}
.shopCart .table .submit ::v-deep .van-submit-bar {
  position: absolute;
  top: 20px;
}
.shopCart .table .submit ::v-deep .van-submit-bar .van-submit-bar__bar {
  background-color: #f8f8f8;
  padding: 30px 20px 30px 28px;
}
.shopCart .table .submit .submitBar {
  color: #bfa548;
  display: flex;
  align-items: left;
  margin-left:13%;
}
.shopCart .table .submit .submitBar b {
  color: #51d672;
  margin: 0 5px;
}
.shopCart .table .submit .submitBar span {
  display: flex;
  align-items: center;
}
.shopCart .table .submit .submitBar span:first-child {
  cursor: pointer;
}
.shopCart .table .submit .submitBar span:first-child:hover {
  color: #bfa548;
}
.shopCart .table .submit .submitBar span:first-child::after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 12px;
  background: #ccc;
  margin: 0 10px;
}
.shopCart .table .submit ::v-deep .van-submit-bar__price {
  color: #bfa548;
}
.shopCart .table .submit ::v-deep .van-submit-bar__text {
  padding-right: 30px;
  color: #000733;
}
</style>

